<template>
  <div class="home">
    <!-- 搜索框 -->
    <div>
      <van-search
        v-model="searchvalue"
        placeholder="请输入搜索关键词"
        disabled
        @click="$router.push('/home/searchpopup')"
      />
    </div>
    <!-- 轮播图 -->
    <div>
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="(item, index) in banner" :key="index">
          <img :src="item.image_url" alt="" width="100%" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <transition name="van-fade">
      <div v-show="$route.path === '/home'">
        <!-- 导航条 -->
        <div>
          <van-grid :column-num="5">
            <van-grid-item
              v-for="item in channel"
              :key="item.id"
              :icon="item.icon_url"
              :text="item.name"
            />
          </van-grid>
        </div>
        <!-- 品牌制造商直供 -->
        <div class="brandList">
          <div class="title">品牌制造商直供</div>
          <van-grid
            :border="false"
            :column-num="2"
            gutter:0
            class="brandList_van-grid"
          >
            <van-grid-item
              v-for="(item, index) in brandList"
              :key="index"
              :text="item.name"
            >
              <van-image :src="item.pic_url" />
            </van-grid-item>
          </van-grid>
        </div>
        <!-- 周一周四，新品首发  -->
        <div class="newGoodsList">
          <div class="title">周一周四，新品首发</div>
          <van-grid :border="false" :column-num="2" gutter:0>
            <van-grid-item
              v-for="(item, index) in newGoodsList"
              :key="index"
              :text="item.name"
            >
              <van-image :src="item.list_pic_url" />
              <div class="pub_name">{{ item.name }}</div>
              <div class="pub_price">
                {{ "¥" + "     " + item.retail_price.toFixed(2) + "元" }}
              </div>
            </van-grid-item>
          </van-grid>
        </div>
        <!-- 人气推荐 -->
        <div class="hotGoodsList">
          <div class="title">人气推荐</div>
          <van-card
            v-for="(item, index) in hotGoodsList"
            :key="index"
            :price="item.retail_price.toFixed(2)"
            :desc="item.goods_brief"
            :title="item.name"
            :thumb="item.list_pic_url"
          />
        </div>
        <!-- 专题精选 -->
        <div class="topicList">
          <div class="title">专题精选</div>
          <van-swipe :loop="false" :width="350">
            <van-swipe-item
              v-for="(item, index) in topicList"
              :key="index"
              style=""
              class="topicList_van-swipe-item"
            >
              <img :src="item.scene_pic_url" alt="" />
              <ul>
                <li>
                  <h5>
                    {{ item.title }}
                    <span>{{ "¥" + "  " + item.price_info }}</span>
                  </h5>
                </li>
                <li>
                  <div class="van-ellipsis" style="font-size: 5px">
                    {{ item.subtitle }}
                  </div>
                </li>
              </ul>
            </van-swipe-item>
            <template #indicator>
              <div class="custom-indicator"></div>
            </template>
          </van-swipe>
        </div>
        <!-- 分类 -->
        <div class="categoryList">
          <div v-for="item in categoryList" :key="item.id">
            <div class="title">
              {{ item.name }}
            </div>
            <van-grid :border="false" :column-num="2">
              <van-grid-item v-for="item2 in item.goodsList" :key="item2.id">
                <van-image :src="item2.list_pic_url" />
                <div class="pub_name">{{ item2.name }}</div>
                <div class="pub_price">
                  {{ "¥" + item2.retail_price.toFixed(2) + "元" }}
                </div>
              </van-grid-item>
            </van-grid>
          </div>
        </div>
      </div>
    </transition>
    <!-- 弹出搜索页面 -->
    <transition name="van-slide-right">
      <router-view />
    </transition>
  </div>
</template>

<script>
import { GetHomeDate } from "../request/api";

export default {
  name: "Home",
  data() {
    return {
      active: "home",
      searchvalue: "",
      banner: [],
      channel: [],
      brandList: [],
      newGoodsList: [],
      hotGoodsList: [],
      topicList: [],
      categoryList: [],
    };
  },
  created() {
    GetHomeDate().then((res) => {
      // console.log("执行了请求");
      let {
        channel,
        banner,
        brandList,
        newGoodsList,
        hotGoodsList,
        topicList,
        categoryList,
      } = res.data;
      this.banner = banner;
      this.channel = channel;
      this.brandList = brandList;
      this.newGoodsList = newGoodsList;
      this.hotGoodsList = hotGoodsList;
      this.topicList = topicList;
      this.categoryList = categoryList;
    });
  },
  components: {},
};
</script>
<style lang = "less" scoped>
.home {
  padding-bottom: 0.8rem;
}
* {
  padding: 0;
  margin: 0;
}
.title {
  height: 0.266667rem;
  font-size: 0.186667rem;
  text-align: center;
  margin-bottom: 0.133333rem;
}
.brandList {
  background-color: #ffffff;
  line-height: 0.533333rem;
  margin-top: 0.266667rem;
}
.newGoodsList {
  margin-top: 0.266667rem;
}
.pub_name {
  font-size: 0.106667rem;
  margin-bottom: 0.133333rem;
}
.pub_price {
  font-size: 0.133333rem;
  color: #bc5552;
}
.hotGoodsList {
  color: black;
}
.topicList {
  margin-top: 0.266667rem;
  margin-bottom: 0.266667rem;
  .topicList_van-swipe-item {
    margin-left: 0.133333rem;
    span {
      text-align: right;
      color: #bc5552;
    }
    img {
      height: 200px;
      width: 100%;
    }
    .custom-indicator {
      position: absolute;
      right: 5px;
      bottom: 5px;
      padding: 2px 5px;
      font-size: 12px;
      background: rgba(0, 0, 0, 0.1);
    }
  }

  h5 {
    font-size: 0.16rem;
  }
  h6 {
    font-size: 0.106667rem;
  }
}
.slide-enter,
.slide-leave-to {
  right: -100%;
}
.slide-enter-active,
.slide-leave-active {
  transition: all 0.5s;
}
.slide-enter-to,
.slide-leave {
  right: 0;
}
</style>
